<template>
	<div>
		<button @click="isShow = !isShow">切换：隐藏/显示</button>
		<transition name="peiqi">
			<h2 v-show="isShow">同学你好！</h2>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'App',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style>
	h2{
		background-color: orange;
		width: 200px;
	}
	@keyframes atguigu {
		0%{
			transform: translateX(0px);
		}
		100%{
			transform: translateX(-200px);
		}
	}
	.peiqi-leave-active{
		animation: 1s atguigu linear;
	}
	.peiqi-enter-active{
		animation: 1s atguigu linear reverse;
	}
</style>